<template>
  <div class="goods-add">
    <div class="goods-add-content">
    <el-form
      ref="formRef"
      class="goods-add-form"
      label-width="auto"
      :model="formData"
      :rules="rules"
      style="max-width: 600px"
    >
      <el-form-item label="优惠券名称" label-position="right" prop="title">
        <el-input v-model="formData.title" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="优惠券类型" label-position="right" prop="disType">
        <el-select v-model="formData.disType" placeholder="请选择">
          <el-option label="满减" :value="1" />
          <el-option label="打折" disabled :value="2" />
          <el-option label="现金抵扣" :value="3" />
        </el-select>
      </el-form-item>
      <el-row  v-if="formData.disType == 1" style="padding-left: 12px;font-size: 14px;">
        <span>满</span>
        <el-form-item label="" label-position="right" label-width="0" prop="cdt">
          <el-input v-model="formData.cdt" placeholder="请输入" style="width: 200px;margin: 0 12px;"></el-input>
        </el-form-item>
        <span style="margin-right: 12px;">减</span>
        <el-form-item label="" label-position="right" label-width="0" prop="discount">
          <el-input v-model="formData.discount" placeholder="请输入" style="width: 200px"></el-input>
        </el-form-item>
      </el-row>
      <el-form-item label="抵扣金额" label-position="right" prop="discount" v-if="formData.disType == 3">
        <el-input v-model="formData.discount" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="使用规则" label-position="right" prop="useNum">
        <el-select v-model="formData.useNum" placeholder="请选择">
          <el-option label="不限" :value="-1" />
          <el-option label="单次" :value="1" />
        </el-select>
      </el-form-item>
      <el-form-item label="有效期至" label-position="right" prop="gmtPushEnd">
        <el-date-picker
          v-model="formData.gmtPushEnd"
          type="datetime"
          value-format="YYYY-MM-DD HH:mm:ss"
          format="YYYY-MM-DD HH:mm:ss"
          placeholder="请选择"
        />
      </el-form-item>
     
    </el-form>
    <el-button-group>
        <el-button type="default" @click="handleCancel">取消</el-button>
        <el-button type="primary" style="margin-left: 10px;" :loading="btnLoading" :disabled="btnLoading" @click="saveData">保存</el-button>
    </el-button-group>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { saveCoupon, getCouponDetail } from "@/api/operation/coupon.js"
const { proxy } = getCurrentInstance();
import useTagsViewStore from '@/store/modules/tagsView'
import router from '@/router'
const id = proxy.$route.query.id
const btnLoading = ref(false)
const formRef = ref(null);
let formData = ref({
  title: '',
  disType: '',
  useNum: '',
  gmtPushEnd: '',
  discount: '',
  cdt: ''
})
if (id) {
  getCouponDetail({ id }).then(res => {
    formData.value = res.data
  })
}

const rules = reactive({
  title: [
    { required: true, message: '请输入优惠券名称', trigger: 'blur' },
  ],
  disType: [
    { required: true, message: '请选择优惠类型', trigger: 'blur' },
  ],
  useNum: [
    { required: true, message: '请选择使用规则', trigger: 'blur' },
  ],
  gmtPushEnd: [
    { required: true, message: '请选择有效期至', trigger: 'blur' },
  ],
  discount: [
    { required: true, message: '请输入抵扣金额', trigger: 'change' },
  ],
  cdt: [
    { required: true, message: '请输入满减条件', trigger: 'change' },
  ],
})
const  saveData = async () => {
  btnLoading.value = true
   await formRef?.value.validate((valid, fields) => {
    if (valid) {
      saveCoupon({...formData.value}).then(res => {
        proxy.$modal.msgSuccess("保存成功")
        handleCancel()
      })
    } else {
      proxy.$modal.msgError("请完善必填项")
      return false
    }
  })
}

const handleCancel = () => {
  useTagsViewStore().delView(router.currentRoute.value)
  router.go(-1)
}
</script>
<style lang="scss">
.goods-add {
  padding: 8px;
  &-content {
    background: #fff;
    border-radius: 5px;
    padding: 12px;
  }
}
</style>